<template>
    <el-drawer
        title="测试"
        :visible.sync="visible"
        :direction="direction"
        :before-close="handleClose"
        custom-class="drawer-info"
        size="80%"
    >
        <div class="info-container">
            <!-- 左侧规则列表 -->
            <div class="rules-list">
                <div class="section-title">规则列表</div>
                <div class="rule-items">
                    <div v-for="(rule, index) in objInfo.rules" :key="index"
                        class="rule-item"
                        :class="{ active: selectedRuleIndex === index }"
                        @click="handleSelectRule(index)"
                    >
                        <el-tag
                            :type="rule.riskLevel === 'high' ? 'danger' : rule.riskLevel === 'medium' ? 'warning' : 'info'"
                            size="small"
                            class="risk-tag"
                        >
                            {{ rule.riskLevel === 'high' ? '高风险' : rule.riskLevel === 'medium' ? '中风险' : '低风险' }}
                        </el-tag>
                        <span class="rule-name">{{ rule.ruleName }}</span>
                    </div>
                </div>
            </div>

            <!-- 右侧规则详情 -->
            <div class="rule-detail">
                <div class="section-title">规则详情</div>
                <template v-if="currentRule">
                    <div class="detail-content">
                        <div class="detail-item">
                            <div class="label">规则名称</div>
                            <div class="value">{{ currentRule.ruleName }}</div>
                        </div>
                        <div class="detail-item">
                            <div class="label">风险等级</div>
                            <div class="value">
                                <el-tag
                                    :type="currentRule.riskLevel === 'high' ? 'danger' : currentRule.riskLevel === 'medium' ? 'warning' : 'info'"
                                    size="small"
                                >
                                    {{ currentRule.riskLevel === 'high' ? '高风险' : currentRule.riskLevel === 'medium' ? '中风险' : '低风险' }}
                                </el-tag>
                            </div>
                        </div>
                        <div class="detail-item">
                            <div class="label">规则描述</div>
                            <div class="value description">{{ currentRule.ruleDesc }}</div>
                        </div>
                    </div>
                </template>
                <div v-else class="empty-detail">
                    <i class="el-icon-document"></i>
                    <p>请在左侧选择规则查看详情</p>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import { rulelistInfo } from "@/api/rule/list/rulelist.js";

export default {
    data() {
        return {
            visible: false,
            direction: "rtl",
            objInfo: {},
            selectedRuleIndex: -1,
            currentRule: null
        }
    },
    methods: {
        init(id) {
            if (id) {
                rulelistInfo(id).then(res => {
                    if (res.code === 0) {
                        this.objInfo = res.data;
                        // 默认选中第一条规则
                        if (this.objInfo.rules && this.objInfo.rules.length > 0) {
                            this.handleSelectRule(0);
                        }
                    } else {
                        this.$message.error(res.msg || '获取详情失败');
                    }
                }).catch(() => {
                    this.$message.error('获取详情失败');
                });
            }
            this.visible = true;
        },
        handleClose(done) {
            this.objInfo = {};
            this.selectedRuleIndex = -1;
            this.currentRule = null;
            this.visible = false;
            this.$emit('close');
            if (done) done();
        },
        handleSelectRule(index) {
            this.selectedRuleIndex = index;
            this.currentRule = this.objInfo.rules[index];
        }
    },
}
</script>

<style lang="scss" scoped>
.drawer-info {
    .info-container {
        height: 100%;
        display: flex;
        background: #fff;
    }

    .section-title {
        padding: 16px 20px;
        font-size: 16px;
        font-weight: 500;
        color: #1f2329;
        border-bottom: 1px solid #e4e7ed;
    }

    .rules-list {
        width: 400px;
        border-right: 1px solid #e4e7ed;
        display: flex;
        flex-direction: column;
        height: 100%;

        .rule-items {
            flex: 1;
            overflow-y: auto;
            padding: 16px;

            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background: #dcdfe6;
                border-radius: 3px;
            }

            &::-webkit-scrollbar-track {
                background: #f5f7fa;
            }

            .rule-item {
                display: flex;
                align-items: center;
                padding: 12px 16px;
                background: #f9f9f9;
                border-radius: 4px;
                margin-bottom: 8px;
                cursor: pointer;
                position: relative;

                &:last-child {
                    margin-bottom: 0;
                }

                &:hover {
                    background: #f0f2f5;
                    .edit-btn {
                        display: inline-block;
                    }
                }

                &.active {
                    background: #e8f3ff;
                    border-color: #a3d0fd;
                }

                .risk-tag {
                    margin-right: 8px;
                }

                .rule-name {
                    flex: 1;
                    font-size: 14px;
                    color: #1f2329;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .edit-btn {
                    display: none;
                    color: #409EFF;
                    font-size: 13px;
                }
            }
        }
    }

    .rule-detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #fff;

        .detail-content {
            padding: 20px;

            .detail-item {
                margin-bottom: 24px;

                &:last-child {
                    margin-bottom: 0;
                }

                .label {
                    font-size: 14px;
                    color: #909399;
                    margin-bottom: 8px;
                }

                .value {
                    font-size: 14px;
                    color: #1f2329;

                    &.description {
                        line-height: 1.6;
                        white-space: pre-wrap;
                    }
                }
            }
        }

        .empty-detail {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #909399;

            i {
                font-size: 48px;
                margin-bottom: 16px;
            }

            p {
                margin: 0;
                font-size: 14px;
            }
        }
    }
}
</style>
